<template>
  <div class="addpatic">
    <el-form
      ref="form"
      size="small"
      :rules="rules"
      :model="form"
      label-width="60px"
    >
      <el-form-item label="题目" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="选项">
        <Optioner ref="Option" @optionvalue="formdata" />
      </el-form-item>

      <el-form-item label="答案">
        <el-radio-group v-model="form.radio">
          <el-radio :label="1">A</el-radio>
          <el-radio :label="2">B</el-radio>
          <el-radio :label="3">C</el-radio>
          <el-radio :label="4">D</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="解析">
        <el-input v-model="form.analysis"></el-input>
      </el-form-item>
      <el-form-item label="分数">
        <el-input-number
          v-model="form.num"
          :step="5"
          step-strictly
        ></el-input-number>
      </el-form-item>
      <el-form-item label="难度">
        <el-rate v-model="form.diffic"></el-rate>
      </el-form-item>
      <el-form-item label="知识点">
        <el-input v-model="form.knowledge"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="empty()">重置</el-button>
        <el-button type="success" @click="addoption">添加选项</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 导入星星组件
// import Difficulty from "@/components/difficulty/index.vue";
// 导入选项组件
import Optioner from "@/components/optioner/index.vue";
export default {
  name: "tfquestions",
  components: {
    Optioner,
  },
  data() {
    return {
      form: {
        id: 1,
        name: "",
        radio: "",
        analysis: "",
        num: null,
        diffic: null,
        knowledge: "",
        optiondata: [],
      },
      rules: {
        name: [{ required: true, message: "请输入账号", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 提交题目
    onSubmit() {
      console.log("submit!", this.form);
    },
    // 添加选项
    addoption() {
      let child = this.$refs.Option; //获取子组件实例
      child.onSubmit();
    },
    // 加载表单数据
    formdata(x) {
      console.log("表单数据", x);
      this.form.optiondata = x;
    },
    empty() {
      console.log("清空表单");
      this.$refs.form.resetFields();
      // this.form = {}
    },
  },
};
</script>

<style lang="scss" scoped>
.addpatic {
  .el-form {
    margin-top: 20px;
    .el-form-item__content {
      .el-rate {
        line-height: 43px;
      }
    }
  }
}
</style>